---
const { class: className, title: title } = Astro.props;
import design from "@assets/designResources/design.png";
import deviceInfo from "@assets/designResources/device-info.png";
import designRed from "@assets/designResources/design-red.png";
import deviceInfoRed from "@assets/designResources/device-info-red.png";
const itemList = [
  {
    CH: "原理图符号和PCB封装",
    icon: design,
    hoverIcon: designRed,
  },
  {
    CH: "封装资源",
    icon: design,
    hoverIcon: designRed,
    path:'/encapsulationResources'
  },
  {
    CH: "产品评估板",
    icon: deviceInfo,
    hoverIcon: deviceInfoRed,
    path:'/productEvaluationBoard'
  },
];
---

<div class:list={[className]}>
 <ul class="px-[16px] box-border mb-[16px]">
    {
        itemList.map(item => (
            <li class="text-[14px] flex mb-[10px] cursor-pointer">
              <a href={item.path} class="w-full flex">
                <img src={item.icon.src} alt='' class="mr-[8px] w-[16px] h-[16px] items-center default" />
                <img src={item.hoverIcon.src} alt='' class="mr-[8px] w-[16px] h-[16px] items-center hover" />
                <span>{item.CH}</span>
              </a>
            </li>
            ))
    }
    <li class="text-brown text-[14px] font-normal cursor-pointer hover:underline">
      <a href="/designResources">查看所有设计资源</a>
    </li>
    </ul>
</div>
<style lang="scss" scoped>
    img.hover{
        display: none;
    }

li:hover{
    color: #712C2F;
    img.hover{
        display: inline-block;
    }
    img.default{
        display: none;
    }
}

</style>
